import React from 'react';
import { User } from '../App';
import { Button } from './ui/button';
import { 
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from './ui/dropdown-menu';
import { Badge } from './ui/badge';
import { Bell, Settings, LogOut, User as UserIcon } from 'lucide-react';

interface TopHeaderProps {
  user: User;
  onLogout: () => void;
}

export function TopHeader({ user, onLogout }: TopHeaderProps) {
  const getRoleBadge = () => {
    const roleConfig = {
      student: { label: '学生', variant: 'default' as const },
      teacher: { label: '教师', variant: 'secondary' as const },
      admin: { label: '管理员', variant: 'destructive' as const }
    };
    
    const config = roleConfig[user.role];
    return <Badge variant={config.variant}>{config.label}</Badge>;
  };

  return (
    <header className="h-16 border-b bg-white flex items-center justify-between px-6">
      {/* Left side - breadcrumb could go here */}
      <div className="flex items-center space-x-4">
        <h1 className="font-medium text-lg">欢迎回来，{user.name}</h1>
        {getRoleBadge()}
      </div>

      {/* Right side - notifications and user menu */}
      <div className="flex items-center space-x-4">
        {/* Notifications */}
        <Button variant="ghost" size="sm" className="relative">
          <Bell className="h-4 w-4" />
          <span className="absolute -top-1 -right-1 h-4 w-4 bg-red-500 text-white text-xs rounded-full flex items-center justify-center">
            3
          </span>
        </Button>

        {/* User Menu */}
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" size="sm" className="flex items-center space-x-2">
              <div className="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center">
                <span className="text-sm font-medium text-primary">
                  {user.name.charAt(0)}
                </span>
              </div>
              <span className="hidden sm:block">{user.name}</span>
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-56">
            <div className="px-2 py-1.5">
              <p className="font-medium">{user.name}</p>
              <p className="text-sm text-muted-foreground">{user.email}</p>
            </div>
            <DropdownMenuSeparator />
            <DropdownMenuItem>
              <UserIcon className="mr-2 h-4 w-4" />
              个人资料
            </DropdownMenuItem>
            <DropdownMenuItem>
              <Settings className="mr-2 h-4 w-4" />
              设置
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem onClick={onLogout} className="text-red-600">
              <LogOut className="mr-2 h-4 w-4" />
              退出登录
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </header>
  );
}